<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- Import style -->
		<link rel="stylesheet" href="css/element-plus-index.css" />
		<!-- Import Vue 3 -->
		<script src="js/vue.global.js"></script>
		<!-- Import component library -->
		<script src="js/element-plus.full.js"></script>
		<!-- 导入icon库文件-->
		<script src="js/element-plus-icons-vue.iife.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<style>
			.heaer{
				background-color: aqua;
			}
			.main{
				width: 100%;
				background-color: antiquewhite;
				height: 500%;
			}
			.aside{
				background-color: azure;
			}
			
		</style>
	</head>
	<body>
		<div id=app>
		 <div class="common-layout">
		    <el-container>
		      <el-header class="heaer">Header</el-header>
		      <el-container>
		        <el-aside width="200px">
					<a href="user.html" target="myframe">
						<el-icon><Search /></el-icon>用户管理
					</a><br/>
					<a href="dept.html" target="myframe">
						<el-icon><Search /></el-icon>部门管理
					</a>
					 <el-button type="primary" @click="logout">Primary</el-button>
				</el-aside>
		        <el-container>
		          <el-main class="main">
					  <div id="a" style="width: 300px;height: 300px;"></div>
					  <iframe src="welcom.html" name="myframe"></iframe>
				  </el-main>
		          <el-footer>Footer</el-footer> 
		        </el-container>
		      </el-container>
		    </el-container>
		  </div>
		</div>
		<script>
			const App = {
				data() {
					return {
						message: "Hello Element Plus",
						dan: "danger"
					};
				},
				methods:{
					logout(){
						location.href="login.html";
					}
				}
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			// 或统一注册所有图标
			for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
				app.component(key, component);
			}
			app.mount("#app");
		</script>
		<script src="js/pie.js"></script>
	</body>

</html>